import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'mobx-react';
import { HashRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
import { asyncComponent } from 'react-async-component';
import { Tools } from 'weaver-mobile';

import allStore from './stores';
import './style';

import { listRoute } from './components/list/util';

const coms = {
  Attachment: asyncComponent({
    resolve: () => import('./components/attachment'),
  }),
  Contacts: asyncComponent({
    resolve: () => import('./components/contacts'),
  }),
  List: asyncComponent({
    resolve: () => import("./components/list"),
  }),
  Setting: asyncComponent({
    resolve: () => import("./components/setting"),
  }),
  Menu: asyncComponent({
    resolve: () => import("./components/menu"),
  }),
  New: asyncComponent({
    resolve: () => import("./components/new"),
  }),
  View: asyncComponent({
    resolve: () => import("./components/view"),
  }),
  Main: asyncComponent({
    resolve: () => import("./components/main"),
  }),
  StaticView: asyncComponent({
    resolve: () => import('./components/view/StaticView')
  })
}

class Root extends React.Component {

  render() {
    return (
      <Provider {...allStore}>
        <Router>
          <Route
            name="home"
            path="/"
            render={props => (
              <coms.Main>
                <Switch>
                  {listRoute.map(list => <Route key={list} name={list} path={`/${list}`} render={(props) => <coms.List key={list} />} />)}
                  <Route name="attachment" path="/attachment" component={coms.Attachment} />
                  <Route name="contacts" path="/contacts" component={coms.Contacts} />
                  <Route name="setting" path="/setting" component={coms.Setting} />
                  <Route name="menu" path="/menu" component={coms.Menu} />
                  <Route name="new" path="/new" component={coms.New} />
                  <Route name="view" path="/view/:id" component={coms.View} />
                  <Route name="staticView" path="/staticView/:id" component={coms.StaticView} />
                  <Redirect to="/inbox" />
                </Switch>
              </coms.Main>
            )}
          />
        </Router>
      </Provider>
    );
  }
}


Tools.getLocaleLabel('email', () => {
  render(<Root />, document.getElementById('root'));
});
